<route lang="yaml">
	meta:
	enabled: false
</route>

<script setup lang="ts">
	import { ref } from 'vue'
	import dayjs from 'dayjs'
	import productApi from '@/api/zhitan/product.ts'

	// import Api from '@/api/modules/system/user'
	const props = defineProps<{
		infoform : any
	}>()
	const emits = defineEmits(['changedata'])
	const tableData = ref([])
	const background = ref(true)
	const allids : any = ref([])
	const allcateData : any = ref([])
	const adminid : any = ref(null)

	// const value = ref(true)
	const total : any = ref(0)
	const paging : any = ref({
		page: 1,
		limit: 10,
		status: 1
	})

	const { pagination } = usePagination()
	pagination.value.size = 20
	pagination.value.sizes = [20, 50, 100]

	onMounted(() => {
		// if (props.infoform) {
		// 	if (props.infoform.adminInfo && props.infoform.adminInfo.applet_user_id) {
		// 		allids.value.push(props.infoform.adminInfo.applet_user_id.id)
		// 		adminid.value = props.infoform.adminInfo.applet_user_id.id
		// 	}
		// 	if (props.infoform.staffList && props.infoform.staffList.length > 0) {
		// 		props.infoform.staffList.forEach((item : any) => {
		// 			allids.value.push(item.applet_user_id.id)
		// 		})
		// 	}
		// }
		getList()
		getcateList()

	})
	// 产品 分类
	function getcateList() {
		productApi.ProductGroup_list({ page: 1, limit: 1000, status: 1 }).then((res : any) => {
			if (res.code === 0) {
				allcateData.value = res.data
			}
		})
	}
	function getList() {
		productApi.Product_list(paging.value).then((res : any) => {
			if (res.code === 0) {
				// res.data.forEach((item : any) => {
				// 	item.code = `SP${item.id.toString().padStart(4, '0')}`;
				// 	if (item.labels) {
				// 		item.labels = item.labels.split(',')
				// 	}
				// })
				tableData.value = res.data
				total.value = res.count
			}

		})
	}
	function changeSelect(e : any) {
		emits('changedata', e)
	}

	// 分页
	function sizeChange(val : any) {
		console.log(val, '分页')
		paging.value.limit = val
		getList()
	}
	// 分页
	function handleCurrentChange(val : any) {
		paging.value.page = val
		getList()
	}
</script>

<template>
	<el-dialog title="选择产品" width="800px" size="small" :close-on-click-modal="false" append-to-body destroy-on-close>
		<el-form :inline="true" class="demo-form-inline" size="default">
			<el-form-item label="产品名称:">
				<el-input v-model="paging.name" placeholder="请输入产品名称" clearable @clear="paging.name = null" />
			</el-form-item>
			<el-form-item label="产品分类：" prop="goods_group_id">
				<el-select v-model="paging.goods_group_id" placeholder="请选择产品分类" clearable
					@clear="paging.goods_group_id = null" class="w-40">
					<el-option v-for="item in allcateData" :key="item.id" :label="item.name" :value="item.id" />
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="getList">
					<template #icon>
						<svg-icon name="ep:search" />
					</template>
					查询
				</el-button>
			</el-form-item>
		</el-form>
		<el-table :data="tableData" highlight-current-row border height="450px">
			<el-table-column prop="id" label="ID" width="60" align="center" />
			<el-table-column prop="name" label="产品名称">
				<template #default="{ row }">
					<div class="flex items-center">
						<image-preview :src="row.image" :width="60" :height="40" />
						<div class="ml-2">
							<div class="f14 d-c mt-1 flex">
								<div class=" mr-2 flex items-center">
									{{ row.name }}
									<!-- <div class="ml-4" v-if="row.labels && row.labels.length>0"><el-tag
      								class="mr-2" v-for="(i,j) in row.labels" :key="j">{{i}}</el-tag>
      						</div> -->
								</div>
							</div>
							<!-- <div class="readxing flex cursor-pointer items-center">
								<div class="mr-4">
									产品编号：{{row.code}}
								</div>
								<div class="">
									<span class="mr-3 c-[#e9e8e8]">|</span>
									销量：{{row.sales_volume || 0}}
								</div>
							</div>
							<div class="readxing flex cursor-pointer items-center">
								<div class="mr-4">
									门店：{{row.shop_info?row.shop_info.name:'未绑定门店'}}
								</div>
								<div class=" flex items-center">
									<span class="mr-3 c-[#e9e8e8]">|</span>
									赠品：<div v-if="row.gift_list&&row.gift_list.length>0">
										<div v-for="(i,j) in row.gift_list" :key="j">
											{{i.gift_info?i.gift_info.name:''}}
										</div>
									</div>
									<div v-else>无赠品</div>
								</div>
							</div> -->
						</div>
					</div>
				</template>
			</el-table-column>

			<el-table-column prop="price" label="销售价格" width="120" align="center">
				<template #default="{ row }">
					{{ row.price /100 }}
				</template>
			</el-table-column>

			<el-table-column prop="scribing_price" label="划线价" width="120" align="center">
				<template #default="{ row }">
					{{ row.scribing_price /100 }}
				</template>
			</el-table-column>
			<!-- <el-table-column prop="sort" label="排序" width="100" align="center">
      	<template #default="{ row }">
      		{{ row.sort }}
      	</template>
      </el-table-column> -->
			<el-table-column fixed="right" label="操作" width="80" align="center">
				<template #default="scope">
					<el-button :type="scope.row.ischange ? 'info' : 'primary'" size="small"
						:disabled="scope.row.ischange" @click.prevent="changeSelect(scope.row)">
						{{ scope.row.ischange ? '选择' : '选择' }}
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="flex items-center justify-center">
			<el-pagination v-model:current-page="paging.page" v-model:page-size="paging.limit" small
				:page-sizes="[10, 20, 50, 100]" :background="background" style="padding-top: 20px;"
				layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="sizeChange"
				@current-change="handleCurrentChange" />
		</div>
	</el-dialog>
</template>

<style scoped>
	.avatar {
		:deep(.el-image) {
			width: 100px !important;
			height: 100px !important;
		}

		:deep(.image-slot) {
			width: 100px !important;
			height: 100px !important;
		}

		:deep(.el-upload__tip) {
			display: none !important;
		}
	}
</style>